import Kfc from './views/cp1';


// 导入一个创建好的 context对象
import myctx from './myContext';

// 使用redux的话 就需要 从react-redux当中 使用一个 Provider组件 来想组件树供应 全局状态
import { Provider } from 'react-redux'; 

// 如果使用toolkit的时候注释下面一行
import store ,{ persistor } from './store'; // 引入 store 

// import  store ,{ persistor }  from './newstore'



// 如果需要实现数据的持久化 还需要引入 一个 PersistGate
import { PersistGate } from 'redux-persist/integration/react'


import React, { useState ,useEffect} from 'react'

// react 路由当前对于网页的核心库 react-router-dom
import { BrowserRouter , HashRouter , Routes , Route} from 'react-router-dom'

import List from './pages/List';
import Detail from './pages/Detail';
import Home from './pages/Home';
import Uc from './pages/Uc';
import Login from './pages/Login';
import ChangePwd from './pages/Pwd';
import ChangeName from './pages/ChangeName';
import NotFound from './pages/NotFound';

 // 传统方式的路由配置 start 

function App() {

    useEffect(()=>{

    },[])

   //  上下文对象的 Provider 是一个内置组件 
   // 使用它的目的就是为了向子代组件统一的供应数据
  
  const [userInfo,setUserInfo] = useState({ name:'刘黑仔' });
  return (
    <Provider store={store}>

      <PersistGate loading={null} persistor={persistor}>
        <BrowserRouter>
            <h1>我是app组件</h1>
            {/* Routes 组件就是让此区域的组件 按照path去匹配路由项 */}
            {/* 符合条件(path匹配)的 就在这个位置渲染 */}
            <Routes>
                <Route path='/' element={ <Home /> } />
                <Route path='list' element={ <List /> } />
                <Route path="detail/:id" element={ <Detail /> } />
                <Route path="uc" element={ <Uc /> } >
                      {/* /uc/pwd  =>  <Uc>  <Outlet> <ChangePwd /> </Outlet>  </Uc>   */}
                      <Route path='pwd' element={ <ChangePwd /> } /> 
                      {/* /uc/name  =>  <Uc>  <Outlet> <ChangeName /> </Outlet>  </Uc>  */}
                      <Route path='name' element={ <ChangeName /> } />
                </Route>
                <Route path="login" element={<Login />} /> 
                {/* 缺省路由 */}
                <Route path="*"  element={ <NotFound /> } />
            </Routes>
        </BrowserRouter>

        </PersistGate> 
    </Provider>  
  );
}

 // 传统方式的路由配置 end 




 // 通过useRouters 来配置路由的方式 start 

//  import  QfRouter from './router'

// function App() {
//       return (
//         <BrowserRouter>
//             <QfRouter />
//         </BrowserRouter>
//       )
// }

 // useRouters end



export default App;

